<template>
  <div class="electronic_detail">
    <Row type="flex" justify="center">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="120"
        style="width: 850px;"
      >
        <FormItem label="产品名称：" prop="prodcutName">
          <Input
            type="text"
            disabled
            v-filterinput="{ reg: regExp.special }"
            v-model="formValidate.prodcutName"
            :maxlength="50"
            placeholder="请输入"
            style="width: 255px"
          ></Input>
        </FormItem>
        <FormItem label="关联商品类型：" prop="goodsType"  >
          <!-- <CheckboxGroup v-model="formValidate.goodsType" style="width:200px;">
            <Checkbox :label="0">游戏币</Checkbox> -->
            <!-- <Checkbox :label="1">优惠券</Checkbox> -->
          <!-- </CheckboxGroup> -->
          <Input
            :value="['游戏币','优惠券'][formValidate.goodsType]"
            placeholder="请输入"
            disabled
            style="width: 255px"
          ></Input>
        </FormItem>
        <FormItem label="关联商品数量：" prop="goodsQty">
          <Input
            v-model="formValidate.goodsQty"
            :maxlength="4"
            disabled
            placeholder="请输入"
            style="width: 255px"
          ></Input>
        </FormItem>
        <FormItem label="合作方名称" prop="partnerName"  >
          <!-- <Select v-model="formValidate.partnerId" style="width:255px" @on-change="selectpartner" clearable>
            <Option
              v-for="item in partneList"
              :value="item.partnerId"
              :key="item.partnerId"
            >{{ item.partnerName }}</Option>
          </Select> -->
          <Input
            v-model="formValidate.partnerName"
            disabled
            placeholder="请输入"
            style="width: 255px"
          ></Input>
        </FormItem>
          <FormItem label="电子码类型：" prop="ecodeType" clearable>
            <Select v-model="formValidate.ecodeType" style="width:255px" disabled>
              <Option
                v-for="item in ecodeList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="电子码生成数量：" prop="ecodeQty"  >
            <Input
              v-model="formValidate.ecodeQty"
              disabled
              :maxlength="10"
              placeholder="请输入"
              style="width: 255px"
            ></Input>
          </FormItem>

        <FormItem label="有效期类型：" prop="periodType" >
          <Select v-model="formValidate.periodType" style="width:255px" clearable disabled>
            <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="有效天数：" prop="days"   v-if="formValidate.periodType===1">
          <Input
            v-model="formValidate.days"
            disabled
            :maxlength="4"
            placeholder="请输入"
            style="width: 255px"
          ></Input>
        </FormItem>
          <FormItem label="生效开始时间：" prop="beginAt" v-if="formValidate.periodType===0">
            <DatePicker
              type="date"
              :editable="editable"
              disabled
              :options="listingTimeOptions"
              @on-change="listingTimeChange"
              v-model="formValidate.beginAt"
              placeholder="请选择"
              style="width: 255px"
            ></DatePicker>
          </FormItem>
          <FormItem label="生效结束时间：" prop="endAt"  >
            <DatePicker
              type="date"
              :editable="editable"
              disabled
              :options="delistingTimeOptions"
              @on-change="delistingTimeChange"
              v-model="formValidate.endAt"
              placeholder="请选择"
              style="width: 255px"
            ></DatePicker>
          </FormItem>
        <FormItem label="备注：" prop="remark" style="display: block;">
          <Row type="flex" align="bottom">
            <Col>
              <Input
                v-model="formValidate.remark"
                disabled
                style="width: 320px"
                type="textarea"
                :maxlength="500"
                :autosize="{ minRows: 4, maxRows: 8 }"
                placeholder="请描述"
                class="Row_content_input"
              ></Input>
            </Col>
            <Col>
              <p style="margin-left: 10px;height: 25px;">{{formValidate.remark.length}}/500</p>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="合作渠道：" prop="channelNames" >
           <!-- <Input
            v-model="formValidate.channelNames"
            disabled
            placeholder="请输入"
            style="width: 255px"
          ></Input> -->
          <div class="channelNames">{{formValidate.channelNames}}</div>
          <!-- <CheckboxGroup v-model="formValidate.channelId">
            <Checkbox :label="item.channelId" v-for="(item,index) in channeList" :key="index" disabled>{{item.channelName}}</Checkbox> -->
            <!-- <Checkbox label="一体机"></Checkbox>
            <Checkbox label="收银台"></Checkbox> -->
          <!-- </CheckboxGroup> -->
        </FormItem>
          <Row>
            <FormItem label="最后操作人：">
              <span>{{formValidate.updaterName}}</span>
            </FormItem>
          </Row>
              <Row>
            <FormItem label="最后操作时间：">
              <span>{{formValidate.updatedAt}}</span>
            </FormItem>
          </Row>
        <FormItem>
          <div style="margin-top: 20px">
            <Button class="btn" @click="back" style="margin-left: 24px;width：100px">返回</Button>
          </div>
        </FormItem>
      </Form>
    </Row>
  </div>
</template>
<script>
import { getePartneList, getChannelList, lookEcodeDetail } from '@/api/system/fishing.js'
import { mapState } from 'vuex'
import regExp from '@/libs/regExp'
import { routeEqual } from '@/libs/util'
export default {
  name: 'electronic_detail',
  data () {
    return {
      formValidate: {
        prodcutName: '',
        goodsType: [],
        goodsQty: '',
        channelNames: '',
        partnerId: '',
        channelId: [],
        ecodeType: '',
        ecodeQty: '',
        periodType: '',
        days: '',
        beginAt: '',
        endAt: '',
        remark: '',
        updaterName: '',
        updatedAt: ''
      },
      channeList: [],
      regExp: regExp,
      editable: false,
      ecodeList: [{ value: 0, label: '静态' }],
      partneList: [],
      periodList: [{ value: 0, label: '指定时间段' }, { value: 1, label: '相对时间段' }],
      listingTimeOptions: {},
      delistingTimeOptions: {},
      ruleValidate: {
        // prodcutName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
        // goodsType: [{ required: true, message: '请选择关联商品类型' }],
        // goodsQty: [{ required: true, message: '关联商品数量不能为空', trigger: 'blur' }],
        // partnerId: [{ required: true, message: '请选择合作方名称', trigger: 'change' }],
        // channelId: [{ required: true, message: '请选择合作渠道' }],
        // ecodeType: [{ required: true, message: '请选择电子码类型' }],
        // ecodeQty: [{ required: true, message: '电子码生成数量不能为空', trigger: 'blur' }],
        // periodType: [{ required: true, message: '请选择有效期类型' }],
        // days: [{ required: true, message: '有效天数不能为空', trigger: 'blur' }],
        // beginAt: [{ required: true, message: '请选择生效开始时间' }],
        // endAt: [{ required: true, message: '请选择生效结束时间' }]
      }
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  mounted () {
    this.getDeatil()
  },
  methods: {
    listingTimeChange (time) {
      this.delistingTimeOptions = {
        disabledDate (date) {
          return date.valueOf() < new Date(time).getTime() - 24 * 60 * 60 * 1000
        }
      }
    },
    delistingTimeChange (time) {
      this.listingTimeOptions = {
        disabledDate (date) {
          return date.valueOf() > new Date(time).getTime()
        }
      }
    },
    back () {
      this.closeModal()
    },
    getDeatil () {
      lookEcodeDetail({
        merchantId: this.merchantId,
        ecodeProductId: this.$route.query.id
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'electronic_list'
        })
      })
    },
    getList () {
      getePartneList({
        merchantId: this.merchantId,
        partnerStatus: 0
      }).then(res => {
        if (res.data.status === 200) {
          this.partneList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    selectpartner (val) {
      console.log('ss', val)
      getChannelList({
        merchantId: this.merchantId,
        channelStatus: 0,
        partnerId: val
      }).then(res => {
        if (res.data.status === 200) {
          this.channeList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }
}
</script>
<style lang="less">
.electronic_detail {
  padding-top: 60px;
  .channelNames{

  }
}
</style>
